<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#id4{
				width:300px;
				height:300px;
				background-color: crimson;
			}
		</style>
	</head>
	<body>
		<div id="id4" onmouseenter="jinru()"; onmouseleave="likai()"; onmousemove="yidong()">
			
		</div>
		<button type="button" onclick="bd1();">按钮1</button>
		<button type="button" id="id1" onclick="bd2();">按钮2</button>
		<button type="button" id="id2">按钮3</button>
		<button type="button" id="id3" onclick="gg()">为按钮3添加监视器</button>
	</body>
	<!-- 1.按钮和DIV的单击事件（三种绑定方式）
	2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	3.登入页面
	用户名输入框，
	密码输入框，
	提交按钮
	
	任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	<script type="text/javascript">
		function jinru(){
			console.log('鼠标进入div')
		}
		function likai(){
			console.log('鼠标离开div')
		}
		function yidong(){
			console.log('鼠标移动div')
		}
		
		
		function bd1(){
			console.log('单击按钮')
		}
		document.getElementById('id1').onclick=function db2(){
			console.log('按钮2单击')
		}
		function gg(){
			document.getElementById('id2').addEventListener('click',function(){
				console.log('按钮3被单击了')
			})
		}
	</script>
</html>
